<template>
  <div class="layout">
    <Sidebar />
    <div class="beneficiary-container">
      <a-card class="box-card">
        <template #title>
          <span>受益人管理</span>
        </template>

        <!-- 提交申请 -->
        <a-card class="section-card">
          <template #title>
            <span>提交申请</span>
          </template>
          <a-form :model="applicationForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-form-item label="申请描述" required>
              <a-textarea v-model:value="applicationForm.description" placeholder="请输入申请描述" :rows="4" />
            </a-form-item>
            <a-form-item label="申请金额" required>
              <a-input-number v-model:value="applicationForm.requestedAmount" :min="1" placeholder="请输入申请金额" style="width: 100%" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 6 }">
              <a-button type="primary" @click="submitApplication">提交申请</a-button>
            </a-form-item>
          </a-form>
        </a-card>

        <!-- 获取申请详情 -->
        <a-card class="section-card">
          <template #title>
            <span>申请详情</span>
          </template>
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-form-item label="地址">
              <a-input v-model:value="address" placeholder="请输入地址" />
              <template #extra>
                <a-button type="primary" @click="getBeneficiaryStats" :disabled="!address">
                  获取详情
                </a-button>
              </template>
            </a-form-item>
          </a-form>
          <div v-if="donationSummary">
            <p>总接收捐赠金额：{{ donationSummary.totalAmount }}</p>
            <p>参与项目数量：{{ donationSummary.projectCount }}</p>
          </div>
        </a-card>

      </a-card>
    </div>
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
import axios from 'axios'
import Sidebar from '../components/Siderbar.vue'
export default {
  name: 'the-Beneficiary',
  components: {
    Sidebar
  },
  data() {
    return {
      applicationForm: {
        description: '',
        requestedAmount: null
      },
      address: '',
      donationSummary: null
    }
  },
  methods: {
    async submitApplication() {
      try {
        if (!this.validateApplicationForm()) {
          return
        }

        const params = new URLSearchParams()
        params.append('description', this.applicationForm.description)
        params.append('requestedAmount', this.applicationForm.requestedAmount)

        await axios.post('/api/beneficiary/application', params)
        message.success('申请提交成功')
        this.resetApplicationForm()
      } catch (error) {
        message.error('申请提交失败：' + error.message)
      }
    },

    validateApplicationForm() {
      if (!this.applicationForm.description) {
        message.warning('请输入申请描述')
        return false
      }
      if (!this.applicationForm.requestedAmount) {
        message.warning('请输入申请金额')
        return false
      }
      return true
    },

    resetApplicationForm() {
      this.applicationForm = {
        description: '',
        requestedAmount: null
      }
    },

    async getBeneficiaryStats() {
      try {
        const response = await axios.get(`/api/beneficiary/${this.address}/stats`)
        this.donationSummary = response.data
        message.success('获取申请详情成功')
      } catch (error) {
        message.error('获取申请详情失败：' + error.message)
      }
    }
  }
}
</script>
<style scoped>
.layout {
  display: flex;
  min-height: 100vh;
}

.beneficiary-container {
  padding: 20px;
  flex: 1;
  margin-left: 256px; /* 修改为与侧边栏宽度相同 */
}

.section-card {
  margin-bottom: 20px;
}

.ant-form-item-extra {
  margin-top: 10px;
}

/* 添加一些额外的样式美化 */
.box-card {
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.section-card {
  border-radius: 4px;
}

.ant-form-item {
  margin-bottom: 24px;
}

.ant-button {
  height: 32px;
  padding: 0 16px;
}

/* 输入框样式优化 */
.ant-input,
.ant-input-number {
  border-radius: 4px;
}

.ant-textarea {
  border-radius: 4px;
  resize: vertical;
}

/* 卡片标题样式优化 */
.ant-card-head {
  border-bottom: 1px solid #f0f0f0;
}

.ant-card-head-title {
  padding: 16px 0;
  font-size: 16px;
  font-weight: 500;
}

/* 捐赠信息展示样式 */
div[v-if="donationSummary"] {
  padding: 16px;
  background: #f8f8f8;
  border-radius: 4px;
  margin-top: 16px;
}

div[v-if="donationSummary"] p {
  margin: 8px 0;
  color: #666;
}

div[v-if="donationSummary"] p:first-child {
  margin-top: 0;
}

div[v-if="donationSummary"] p:last-child {
  margin-bottom: 0;
}
</style>